<template>
  <div class="global-data-test-page">
    <div class="container">
      <h1>全局数据测试</h1>
      
      <div class="test-section">
        <h2>全局数据状态</h2>
        <div class="data-status">
          <div class="status-item">
            <h3>商品数据</h3>
            <p>数量: {{ globalData.products.length }}</p>
            <p>前5个商品ID: {{ globalData.products.slice(0, 5).map(p => p.id).join(', ') }}</p>
          </div>
          
          <div class="status-item">
            <h3>分类数据</h3>
            <p>数量: {{ globalData.categories.length }}</p>
            <p>分类名称: {{ globalData.categories.map(c => c.name).join(', ') }}</p>
          </div>
          
          <div class="status-item">
            <h3>用户数据</h3>
            <p>数量: {{ globalData.users.length }}</p>
          </div>
          
          <div class="status-item">
            <h3>订单数据</h3>
            <p>数量: {{ globalData.orders.length }}</p>
          </div>
        </div>
      </div>
      
      <div class="test-section">
        <h2>商品详情测试</h2>
        <div class="input-group">
          <a-input 
            v-model:value="testProductId" 
            placeholder="输入商品ID" 
            style="width: 200px; margin-right: 10px;"
          />
          <a-button @click="testProductDetail" :loading="loading">测试商品详情</a-button>
        </div>
        
        <div v-if="testResult" class="test-result">
          <h3>测试结果:</h3>
          <pre>{{ JSON.stringify(testResult, null, 2) }}</pre>
        </div>
      </div>
      
      <div class="test-section">
        <h2>商品列表测试</h2>
        <a-button @click="testProductList" :loading="loading">测试商品列表</a-button>
        
        <div v-if="productListResult" class="test-result">
          <h3>商品列表结果:</h3>
          <p>总数: {{ productListResult.total }}</p>
          <p>当前页: {{ productListResult.page }}</p>
          <p>每页数量: {{ productListResult.pageSize }}</p>
          <p>返回商品数量: {{ productListResult.list.length }}</p>
        </div>
      </div>
      
      <div class="test-section">
        <h2>分类测试</h2>
        <a-button @click="testCategories" :loading="loading">测试分类</a-button>
        
        <div v-if="categoriesResult" class="test-result">
          <h3>分类结果:</h3>
          <div v-for="category in categoriesResult" :key="category.id" class="category-item">
            <strong>{{ category.name }}</strong> - {{ category.description }}
          </div>
        </div>
      </div>
      
      <div class="test-section">
        <h2>快速测试</h2>
        <div class="quick-tests">
          <a-button 
            v-for="id in [1, 2, 3, 4, 5]" 
            :key="id"
            @click="quickTestProduct(id)"
            style="margin-right: 10px; margin-bottom: 10px;"
          >
            测试商品 {{ id }}
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { productApi } from '@/api'

// 响应式数据
const loading = ref(false)
const testProductId = ref('1')
const testResult = ref(null)
const productListResult = ref(null)
const categoriesResult = ref(null)

// 全局数据状态
const globalData = reactive({
  products: [],
  categories: [],
  users: [],
  orders: []
})

// 测试商品详情
const testProductDetail = async () => {
  if (!testProductId.value) {
    alert('请输入商品ID')
    return
  }
  
  loading.value = true
  
  try {
    console.log('开始测试商品详情，ID:', testProductId.value)
    const response = await productApi.getProductDetail(testProductId.value)
    console.log('API响应:', response)
    
    testResult.value = response
  } catch (error) {
    console.error('测试失败:', error)
    testResult.value = { error: error.message }
  } finally {
    loading.value = false
  }
}

// 测试商品列表
const testProductList = async () => {
  loading.value = true
  
  try {
    console.log('开始测试商品列表')
    const response = await productApi.getProducts({ page: 1, pageSize: 10 })
    console.log('商品列表响应:', response)
    
    if (response.code === 200) {
      productListResult.value = response.data
      globalData.products = response.data.list
    }
  } catch (error) {
    console.error('商品列表测试失败:', error)
  } finally {
    loading.value = false
  }
}

// 测试分类
const testCategories = async () => {
  loading.value = true
  
  try {
    console.log('开始测试分类')
    const response = await productApi.getCategories()
    console.log('分类响应:', response)
    
    if (response.code === 200) {
      categoriesResult.value = response.data
      globalData.categories = response.data
    }
  } catch (error) {
    console.error('分类测试失败:', error)
  } finally {
    loading.value = false
  }
}

// 快速测试
const quickTestProduct = (id) => {
  testProductId.value = id.toString()
  testProductDetail()
}

// 初始化时加载一些数据
const initData = async () => {
  await testProductList()
  await testCategories()
}

// 页面加载时初始化
initData()
</script>

<style scoped>
.global-data-test-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.test-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.test-section h2 {
  color: #333;
  margin-bottom: 15px;
}

.data-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.status-item {
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.status-item h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.status-item p {
  margin: 5px 0;
  color: #666;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.test-result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.test-result pre {
  background-color: #f1f3f4;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}

.category-item {
  padding: 5px 0;
  color: #666;
}

.quick-tests {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 